<template>
<div>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">
    <el-tree
      @node-contextmenu="rightClick"
      lazy 
      :load="getOrgList" 
      :props="defaultProps" 
      highlight-current 
      @node-click="handleNodeClick">
    </el-tree></el-tab-pane>
    <el-tab-pane label="配置管理" name="second">
      <el-tree
        @node-contextmenu="rightClick"
        lazy 
        :load="getOrgList" 
        :props="defaultProps" 
        highlight-current 
        @node-click="handleNodeClick">
      </el-tree>
    </el-tab-pane>
  </el-tabs>
  <div class="">
      
  </div>
  <div class="treeMenu" v-show="treeMenu">
    <el-menu
      id="menu"
      @select="handleSelect"
      text-color="#000"
    >
      <el-menu-item index="1" class="menuItem">
        <span slot="title">新建</span>
      </el-menu-item>
      <el-menu-item index="2" class="menuItem">
        <span slot="title">修改</span>
      </el-menu-item>
      <el-menu-item index="3" class="menuItem">
        <span slot="title">删除</span>
      </el-menu-item>
      <el-menu-item index="4" class="menuItem">
        <span slot="title">复制</span>
      </el-menu-item>
      <el-menu-item index="5" class="menuItem">
        <span slot="title">黏贴</span>
      </el-menu-item>
      <el-menu-item index="6" class="menuItem">
        <span slot="title">剪切</span>
      </el-menu-item>
    </el-menu>
  </div>
</div>
    
    
</template>


<script>
import api from '../../api/index'
import http from '../../untils/http'
  export default {
    data() {
      return {
        defaultProps: {
          label: 'text',
          children: 'children'
        },
        treeData:[],
        treeMenu:false,
        isDisabledCloseLeftBtnFlag:true,
        isDisabledCloseRightBtnFlag:true,
        left:'',
        top:'',
        activeName: 'second'
      };
    },
    created(){
      // console.log(this.$route)
      // console.log(this.treeData)
    },
    mounted(){
      // console.log(this.treeData)
    },
    methods: {
      handleClick(tab, event) {
        // console.log(tab, event);
        
      },
      handleNodeClick(data) {
        // console.log(data);
         this.$router.push({
            path:`/doremi/tree${data.attributes.id}`,
            // query:data
            query:{
              id:String(data.attributes.id),
              text:data.text
            }
          })
      },
      getOrgList(node,resolve) {
          if(node.level == 0){
          api.treelevel1().then(res => {
          let treeData = [];
            res.data.forEach(e => {
                    treeData.push(e)
                })
          resolve(treeData);
          }).catch(err => console.log(err))
          // resolve(
          //   [{
          //     "id": "100000001555",
          //     "text": " \u5bf9\u516c\u5b58\u6b3e",
          //     "iconCls": "icon-suite",
          //     "state": "closed",
          //     "attributes": {
          //       "id": 1555,
          //       "category": "dir",
          //       "name": "\u5bf9\u516c\u5b58\u6b3e",
          //       "num": "",
          //       "desc": "",
          //       "sn": null,
          //       "product_date": null,
          //       "physical_sys_id": 1
          //     }
          //   }, {
          //     "id": "100000002301",
          //     "text": "DSCK01 \u5bf9\u79c1\u5b58\u6b3e",
          //     "iconCls": "icon-suite",
          //     "state": "closed",
          //     "attributes": {
          //       "id": 2301,
          //       "category": "dir",
          //       "name": "\u5bf9\u79c1\u5b58\u6b3e",
          //       "num": "DSCK01",
          //       "desc": "",
          //       "sn": 0,
          //       "product_date": "06/12/2020",
          //       "physical_sys_id": null
          //     }}]
          // )
          }else{
            let data1={
              id:node.data.id,
              name:node.data.text,
              category: "dir"
            }
            api.treelevel2(data1).then(res => {
            let myList = [];
            res.data.data.forEach(e => {
                    myList.push(e)
                })
            resolve(myList);
            // console.log(this.data)
            }).catch(err => console.log(err))
          }
      },
      // 右键事件
       rightClick(MouseEvent, object, Node, element) { // 鼠标右击触发事件
        this.treeMenu = false // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
        this.treeMenu = true  // 显示模态窗口，跳出自定义菜单栏
        var menu = document.querySelector('.treeMenu') 
        // console.log(menu)
        menu.style.left = MouseEvent.clientX + 'px'
        document.addEventListener('click', this.foo) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
        console.log('clientHeight:', document.documentElement.clientHeight)
        console.log('clientY:', MouseEvent.clientY)
        console.log(document.documentElement.clientHeight- MouseEvent.clientY>240)
        if(document.documentElement.clientHeight- MouseEvent.clientY>240){//屏幕高度-鼠标点位置的Y值小于120的时候改变top的位置
          menu.style.bottom = "auto"
          menu.style.top = MouseEvent.clientY + 'px'
        }else{
          menu.style.top = "auto"
          menu.style.bottom = 0 + 'px'
        }
       
        // console.log('右键被点击的event:', MouseEvent)
        // console.log('右键被点击的object:', object)
        // console.log('右键被点击的value:', Node)
        // console.log('右键被点击的element:', element)
        // console.log('鼠标点击了树形结构图')
      },
      foo() { // 取消鼠标监听事件 菜单栏
          this.treeMenu = false
          document.removeEventListener('click', this.foo) // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
        },
      handleSelect(key){
        if(key==1){
          console.log('这是新建功能');
        }else if(key==2){
          console.log('这是修改功能');
        }
      }

    }
  };
</script>
<style scoped>
.treeMenu{
  border: 1px solid #ccc;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
  width: 100px;
  border-radius: 4px;
  color: #333;
  position: absolute;
  top: 0;
  left: 200px;
  z-index: 9999;
} 
.el-menu-vertical{
  border: 3px solid rgb(84, 92, 100);
  border-radius: 10px;
  z-index: 100;
} 
.el-menu-vertical i{
  color: #777777;
}
.menuItem{
  height: 40px;
  line-height: 40px;
  font-size: 1.2rem;
  font-size: 14px;
  color: #333;
}
.menuItem:hover{
  background-color: #409EFF;
}

</style>